<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        section {
            padding: 10px;
            border-bottom: 5px solid red;
        }
    </style>

    <style type="text/css">
        #text-by-linear div {
            width: 500px;
            height: 100px;
            background-image: linear-gradient(to right, red 90%, black, blue);
        }
    </style>

    <style type="text/css">
        #text-by-radial div {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-image: radial-gradient(circle at center, red 10%, black, blue);
        }
    </style>


</head>
<body>
<section id="text-by-linear">
    <div></div>
</section>

<section id="text-by-radial">
    <div></div>
</section>

</body>
</html>